<template>
	<view style="padding-bottom: 40rpx;">
		<view class="header">
			<u-swiper :autoplay='false' :list="tradetail.images" height='500' border-radius='0' mode='number' indicator-pos='bottomRight'></u-swiper>
			<view class="nav-bar">
				<view class="left" @click="back">
					<image src="../../../../../static/imgs/backicon.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="travelInfo">
			<view class="infoBox">
				<view class="title">
					{{tradetail.title}}
				</view>
				<view class="type">
					{{tradetail.type=='1'?'体验游':tradetail.type=='2'?'品质游':'尊享游'}} <text>已出游{{tradetail.base_num}}人</text>
				</view>
				<view class="price-box">
					<view class="rel-price">
						¥<text>{{Number(tradetail.price)-Number(tradetail.use_welfare_fund)}}</text>
					</view>
				<!-- 	<view class="rel-price" v-else>
						¥<text>{{Number(tradetail.vip_price)-Number(tradetail.use_welfare_fund)}}</text>
					</view> -->
					<view class="fl-price">
						+ {{tradetail.use_welfare_fund}} 福利金
					</view>
				</view>
			</view>
		</view>
		<view class="activeInfo">
			<view class="lable">
				出发日期
			</view>
			<view class="dateBox">
				<view style="white-space: nowrap">
					<scroll-view scroll-x="true" scroll-left="">
						<view class="calendar">
							<view class="dayBox" :class="{active:dayIndex == index}" v-for="(item,index) in days" :key='index' @click="changeDay(index)">
								<view class="date">
									{{item.day}}
								</view>
								<view class="week">
									{{item.week}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="calendar-pop" @click="showCalendar=true">
					<image class="more" src="../../../../../static/imgs/gdrq.png" mode=""></image>
					<text>更多</text>
				</view>
			</view>
			<view class="lable">
				活动总人数
			</view>
			<view class="input-box">
				<input type="text" placeholder="最低30人成团" v-model="peoNum" placeholder-style="font-size:32rpx;color:#AAAAAA"/>
			</view>
			<view class="lable">
				参与人区域
			</view>
			<view class="select-box">
				<view class="text" v-if="!area">
					请选择
				</view>
				<view class="text" style="color: #333333;" v-else>
					{{area}}
				</view>
				<u-icon name="arrow-right" color="#999999" size="32" @click="showPicker"></u-icon>
			</view>
		</view>
		<view class="btn act" v-if="tripDate && peoNum && area" @click="submit">
			发起申请
		</view>
		<view class="btn" v-else>
			发起申请
		</view>

		<u-popup v-model="showCalendar" mode='bottom' :closeable='true' border-radius='24'>
			<view class="poPup">
				<view class="title">
					选择出行日期
				</view>
				<calendar @changeDate="changeDate"></calendar>
			</view>
		</u-popup>
		
		
		<aui-picker ref="picker" :title="auiPicker.title" :layer="auiPicker.layer" :data="auiPicker.data"
			@callback="pickerCallback"></aui-picker>
		
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	import calendar from '@/components/calendar/hd-calendar.vue'
	import auiPicker from '@/components/aui-picker/aui-picker.vue';
	export default {
		components: {
			calendar,
			auiPicker
		},
		data() {
			return {
				auiPicker: {
					title: '区域选择',
					layer: null,
					data: []
				},
				dayIndex: -1,
				days: [],
				showCalendar: false,
				showPciker:false,
				id: '', // 线路id
				tradetail: '',
				tripDate:'',//出行日期
				area:'',// 区域
				peoNum:'',
				cityList:[],
				citycode:'',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getraDetail()
			this.getDateTravel()
			this.getMyregion()
		},
		methods: {
			// 发起申请
			async submit(){
				let {id,tripDate,peoNum,citycode} =this
				let res =await myRequest.getActivity({
					id:id,
					start_date:tripDate,
					people_num:peoNum,
					province_code:citycode
				})
				if(res.status){
					uni.showToast({
						title:'申请成功'
					})
					this.dayIndex =-1
					this.peoNum =''
					this.area=''
				}
			},
			pickerCallback(e) {
				this.citycode = e.data[1].id
				this.area = e.data[1].name + '市'
			},
			// 获取省市信息
			async getMyregion() {
				let that = this
				let res = await myRequest.getregion()
				if (res.status) {
					let i = 0
					res.data.forEach((item, k) => {
						if (k != i) {
							this.cityList.push(item)
						}
					})
				}
			},
			showPicker() {
				// 处理省市数据
				let list = []
				console.log(this.cityList)
				this.cityList.forEach(item => {
					let cityObj = {}
					cityObj.name = item.name
					cityObj.id = item.code
					cityObj.children = []
					item.citys.forEach(k => {
						let childObj = {}
						childObj.name = k.name
						childObj.id = k.code
						cityObj.children.push(childObj)
					})
					list.push(cityObj)
				})
				const _this = this;
				_this.auiPicker.layer = 2;
				_this.auiPicker.data = list
				_this.$refs.picker.open()
			},
			// 价格日期
			getDateTravel() {
				for (var i = 0; i < 7; i++) {
					let dayObj = {
						day: this.getDateStr(i),
						week: ''
					}
					this.days.push(dayObj)
				}
				
				this.days.forEach(item => {
					item.week = '周' + item.day.split('周')[1]
					item.day = item.day.split('周')[0]
				})
			},
			// 获取一周内日期
			getDateStr(Count) {
				var dd = new Date();
				dd.setDate(dd.getDate() + Count);
				var y = dd.getFullYear()
				var m = dd.getMonth() + 1;
				var d = dd.getDate();
				var w = dd.getDay();
				m = m < 10 ? '0' + m : m;
				d = d < 10 ? '0' + d : d;
				var week;
				switch (w) {
					case 0:
						week = '周日';
						break;
					case 1:
						week = '周一';
						break;
					case 2:
						week = '周二';
						break;
					case 3:
						week = '周三';
						break;
					case 4:
						week = '周四';
						break;
					case 5:
						week = '周五';
						break;
					case 6:
						week = '周六';
						break;
				}
				return y + "-" + m + "-" + d + week;
			},
			// 详情
			async getraDetail() {
				let {
					id
				} = this
				let res = await myRequest.getTraveldet({
					id: id
				})
				if (res.status) {
					this.tradetail = res.data
				}
			},
			// 选择日期    
			changeDate(val) {
				this.tripDate = val.date
				this.showCalendar =false
				this.days.forEach((date,index)=>{
					if(val.date == date.day) {
						this.dayIndex = index
					}else {
						this.dayIndex = -1
					}
				})
			},
			changeDay(index) {
				this.dayIndex = index
				this.tripDate = this.days[index].day
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 500rpx;
		background: #FFFFFF;
		position: relative;
		z-index: 1;

		.nav-bar {
			width: 100%;
			height: 88rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			// #ifdef APP-PLUS
			top: var(--status-bar-height);
			// #endif
			// #ifdef H5
			top: 0;

			// #endif
			.left {
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}

	.travelInfo {
		height: 208rpx;
		width: 100%;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0px 0px;
		margin-top: -24rpx;
		position: relative;
		z-index: 2;

		.infoBox {
			padding: 0 28rpx;

			.title {
				padding: 10rpx 0;
				width: 100%;
				height: auto;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.type {
				font-size: 28rpx;
				font-family: PingFangSC-Medium;
				color: #FB4F4B;

				text {
					margin-left: 20rpx;
					color: #666666;
				}
			}

			.price-box {
				width: fit-content;
				width: -webkit-fit-content;
				width: -moz-fit-content;
				display: flex;
				margin-top: 24rpx;

				.rel-price {
					height: 44rpx;
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					background: linear-gradient(180deg, #FBE9B9 0%, #FDE6B8 100%);
					border-radius: 8rpx 0px 0px 8rpx;
					padding: 0 6rpx;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
					line-height: 44rpx;
					color: #333333;

					text {
						font-size: 32rpx;
						font-weight: bold;
						margin-left: 4rpx;
					}
				}

				.fl-price {
					height: 44rpx;
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					background: #333333;
					border-radius: 0px 8rpx 8rpx 0px;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
					color: #FBE8B8;
					line-height: 44rpx;
					padding: 0 6rpx;
				}
			}
		}
	}

	.activeInfo {
		width: 710rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto 0;
		padding-bottom: 20rpx;

		.lable {
			width: 100%;
			height: 88rpx;
			padding-left: 20rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular;
			line-height: 88rpx;
			color: #333333;
		}

		.input-box,
		.select-box {
			width: 670rpx;
			height: 100rpx;
			background: #F2F2F7;
			border-radius: 16rpx;
			margin: 20rpx auto 0;

			input {
				width: 100%;
				height: 100%;
				text-indent: 32rpx;
			}
		}

		.select-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx 0 34rpx;

			.text {
				font-size: 32rpx;
				font-family: PingFangSC-Regular;
				color: #AAAAAA;
			}
		}

		.dateBox {
			width: 710rpx;
			height: 116rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: relative;
			margin-top: 20rpx;

			.calendar-pop {
				width: 104rpx;
				height: 116rpx;
				background: #FFFFFF;
				border-radius: 0px 8px 8px 0px;
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.more {
					width: 36rpx;
					height: 36rpx;
				}

				text {
					font-size: 20rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #666666;
					margin-top: 8rpx;
				}
			}

			.calendar {
				padding-left: 15rpx;

				.dayBox {
					display: inline-block;
					width: 152rpx;
					height: 116rpx;
					border: 2rpx solid #F2F2F7;
					border-radius: 16rpx;
					background-color: #FFFFFF;
					text-align: center;
					margin: 0 5rpx;
					padding: 20rpx 0;

					&.active {
						background-color: #FDE7DF;
					}

					.date {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					.week {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}
	}

	.btn {
		width: 670rpx;
		height: 100rpx;
		background: #C4C2C2;
		border-radius: 20rpx;
		margin: 80rpx auto 0;
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		line-height: 100rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.act {
		background: linear-gradient(180deg, #50A3FE 0%, #3064FC 100%);
	}

	.poPup {
		.title {
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
		}
	}

	/deep/ .u-swiper-indicator {
		bottom: 40rpx !important;
	}
</style>
